import React from 'react';
import moment from 'moment';
import { Form, Row, Col, Select, Input, DatePicker, AutoComplete } from 'antd';
import { BG_RELATE_TYPE } from '@/pages/Recruitment/dictionary';
// import Pre from '@/components/Pre';
// import { spread } from 'lodash-decorators';
import { InlineInputWrap } from '..';
import styles from './index.less';

const { Option } = Select;
const { TextArea } = Input;

export const BG_CONTACT_WAY = [
    { value: 1, text: '电话' },
    { value: 2, text: '微信' },
    { value: 3, text: 'QQ' },
    { value: 4, text: '邮件' },
    { value: 99, text: '其他' }
];

// const getDictName = (value, dict) => dict.find(item => item.value === vavlue)?.text;

const relateListOrigin = BG_RELATE_TYPE.map(item => item.text);

const editLayout = { layout: 'vertical' };
const viewLayout = {
    layout: 'vertical'
};

const ContactItem = ({ form, isEdit, renderItem, id, workCompanyList = [], detail = {} }) => {
    const { getFieldDecorator } = form;

    // 混乱的UI设计
    const formItemLayout = isEdit ? editLayout : viewLayout;

    const [companyList, setCompanyList] = React.useState(workCompanyList.filter(item => item));
    const handleSearch = searchText => {
        setCompanyList(workCompanyList.filter(item => !searchText || item.includes(searchText)));
    };

    const [relateList, setRelateList] = React.useState(relateListOrigin);
    const handleRelateSearch = searchText => {
        setRelateList(relateListOrigin.filter(item => !searchText || item.includes(searchText)));
    };

    const contactWayValue =
        form.getFieldValue(`recruitTalentBackgrounds[${id}].objectContactType`) ??
        detail.objectContactType ??
        BG_CONTACT_WAY[0].value;

    const currentContactWay = BG_CONTACT_WAY.find(item => item.value === contactWayValue)?.text;

    return (
        <>
            <Row gutter={140}>
                <Col span={12}>
                    <Form.Item label="背调公司" {...formItemLayout}>
                        {renderItem(
                            getFieldDecorator(`recruitTalentBackgrounds[${id}].organizationName`, {
                                initialValue: detail.organizationName,
                                rules: [
                                    {
                                        required: true,
                                        message: '背调公司不能为空'
                                    }
                                ]
                            })(
                                <AutoComplete
                                    style={{ width: '100%', fontSize: 16 }}
                                    getPopupContainer={triggerNode => triggerNode.parentElement}
                                    placeholder="请选择或输入背调公司"
                                    dataSource={companyList}
                                    onSearch={handleSearch}
                                />
                            ),
                            <span
                                style={{
                                    fontFamily: 'PingFangSC-Regular',
                                    fontSize: '16px',
                                    color: 'rgba(0,0,0,0.85)',
                                    fontWeight: '500'
                                }}
                            >
                                {detail.organizationName}
                            </span>,
                            isEdit
                        )}
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="联系人姓名" {...formItemLayout}>
                        {renderItem(
                            getFieldDecorator(`recruitTalentBackgrounds[${id}].objectName`, {
                                initialValue: detail.objectName,
                                rules: [
                                    {
                                        required: true,
                                        message: '联系人姓名不能为空'
                                    }
                                ]
                            })(<Input placeholder="请输入联系人姓名" />),
                            <span
                                style={{
                                    fontFamily: 'PingFangSC-Regular',
                                    fontSize: '16px',
                                    color: 'rgba(0,0,0,0.85)',
                                    fontWeight: '500'
                                }}
                            >
                                {detail.objectName}
                            </span>,
                            isEdit
                        )}
                    </Form.Item>
                </Col>
            </Row>
            <Row gutter={140}>
                <Col span={12}>
                    <Form.Item label="与你的关系" {...formItemLayout}>
                        {renderItem(
                            getFieldDecorator(`recruitTalentBackgrounds[${id}].relateType`, {
                                initialValue: detail.relateType,
                                rules: [
                                    {
                                        required: true,
                                        message: '与你的关系不能为空'
                                    }
                                ]
                            })(
                                <AutoComplete
                                    style={{ width: '100%', fontSize: 16 }}
                                    getPopupContainer={triggerNode => triggerNode.parentElement}
                                    placeholder="请选择或输入与你的关系"
                                    dataSource={relateList}
                                    onSearch={handleRelateSearch}
                                />
                            ),
                            <span
                                style={{
                                    fontFamily: 'PingFangSC-Regular',
                                    fontSize: '16px',
                                    color: 'rgba(0,0,0,0.85)',
                                    fontWeight: '500'
                                }}
                            >
                                {detail.relateType}
                            </span>,
                            isEdit
                        )}
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="联系方式" required={isEdit} {...formItemLayout}>
                        <InlineInputWrap>
                            <Form layout="inline" className={styles.con} style={{ display: 'flex', width: '100%' }}>
                                <Form.Item {...formItemLayout}>
                                    {renderItem(
                                        getFieldDecorator(`recruitTalentBackgrounds[${id}].objectContactType`, {
                                            initialValue: contactWayValue,
                                            rules: [
                                                {
                                                    required: true,
                                                    message: '请选择联系方式的类型'
                                                }
                                            ]
                                        })(
                                            <Select
                                                style={{ width: '100px' }}
                                                placeholder="请选择联系方式的类型"
                                                getPopupContainer={triggerNode => triggerNode.parentElement}
                                            >
                                                {BG_CONTACT_WAY.map(item => (
                                                    <Option key={item.value} value={item.value}>
                                                        {item.text}
                                                    </Option>
                                                ))}
                                            </Select>
                                        ),
                                        <span
                                            style={{
                                                fontFamily: 'PingFangSC-Regular',
                                                fontSize: '16px',
                                                color: 'rgba(0,0,0,0.85)',
                                                fontWeight: '500'
                                            }}
                                        >
                                            {currentContactWay || ''}-{detail.objectContactInfo || ''}
                                        </span>,
                                        isEdit
                                    )}
                                </Form.Item>
                                {isEdit && (
                                    <Form.Item style={{ flex: 1 }} {...formItemLayout}>
                                        {getFieldDecorator(`recruitTalentBackgrounds[${id}].objectContactInfo`, {
                                            initialValue: detail.objectContactInfo,
                                            rules: [
                                                {
                                                    required: true,
                                                    message: '请输入联系方式'
                                                },
                                                // {
                                                //     pattern: /^[^\s]*$/,
                                                //     message: '禁止输入空格'
                                                // },
                                                {
                                                    validator(rule, value, callback) {
                                                        const regex = /\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
                                                        if (value && contactWayValue === 4) {
                                                            const tempValue = value.trim();
                                                            if (regex.test(tempValue)) {
                                                                callback();
                                                            } else {
                                                                callback('请输入正确的个人邮箱');
                                                            }
                                                        }
                                                        callback();
                                                    }
                                                }
                                            ],
                                            getValueFromEvent: event => event.target.value.replace(/\s+/g, '')
                                        })(
                                            <Input
                                                style={{ width: '100%' }}
                                                placeholder={`请输入${currentContactWay}`}
                                                allowClear
                                                maxLength={50}
                                            />
                                        )}
                                    </Form.Item>
                                )}
                            </Form>
                        </InlineInputWrap>
                    </Form.Item>
                </Col>
            </Row>
            <Row gutter={140}>
                <Col span={12}>
                    <Form.Item label="建议背调时间" {...formItemLayout}>
                        {renderItem(
                            getFieldDecorator(`recruitTalentBackgrounds[${id}].backgroundTime`, {
                                initialValue: moment(detail.backgroundTime),
                                rules: [
                                    {
                                        required: true,
                                        message: '背调时间不能为空'
                                    }
                                ]
                            })(
                                <DatePicker
                                    showTime={{ format: 'HH:mm' }}
                                    format="YYYY-MM-DD HH:mm"
                                    placeholder="请选择背调时间"
                                    style={{ width: '100%' }}
                                />
                            ),
                            <span
                                style={{
                                    fontFamily: 'PingFangSC-Regular',
                                    fontSize: '16px',
                                    color: 'rgba(0,0,0,0.85)',
                                    fontWeight: '500'
                                }}
                            >
                                {detail.backgroundTime}
                            </span>,
                            isEdit
                        )}
                    </Form.Item>
                </Col>
            </Row>
            <Row gutter={140}>
                <Col span={12}>
                    <Form.Item
                        {...formItemLayout}
                        label="背调对象介绍"
                        // {...(isEdit ? formItemLayout : { labelCol: { span: 4 }, wrapperCol: { span: 18 } })}
                        {...(isEdit ? { extra: '不超过1000个字符' } : {})}
                        // {...(isEdit ? {} : { className: styles.fixLabel })}
                    >
                        {renderItem(
                            getFieldDecorator(`recruitTalentBackgrounds[${id}].objectRemark`, {
                                initialValue: detail.objectRemark
                            })(<TextArea maxLength={1000} placeholder="请输入背调对象介绍" style={{ height: 100 }} />),
                            <span
                                style={{
                                    fontFamily: 'PingFangSC-Regular',
                                    fontSize: '16px',
                                    color: 'rgba(0,0,0,0.85)',
                                    whiteSpace: 'pre-wrap',
                                    margin: 0,
                                    fontWeight: '500'
                                }}
                            >
                                {detail.objectRemark}
                            </span>,
                            isEdit
                        )}
                    </Form.Item>
                </Col>
            </Row>
        </>
    );
};

export default React.memo(ContactItem);
